<template>
  <div class="companyInfo">
    <NavBarVue :title="title" />
    <div
      class="map"
      id="map"
      style="position: fixed; top: 46px; left: 0; width: 100%; height: 100%"
    ></div>
  </div>
</template>

<script>
import NavBarVue from "@/components/NavBar.vue";
import { ShowCompanyInfoMap } from "@/util/http";
import { Dialog } from "vant";
import AMapLoader from "@amap/amap-jsapi-loader";
export default {
  name: "CompanyMap",
  components: {
    NavBarVue,
  },
  props: ["companyid"],
  mounted() {
    this.onLoad();
  },
  // 定义属性
  data() {
    return {
      title: "",
      map: {},
      long: 0,
      lat: 0,
    };
  },
  // 方法集合
  methods: {
    onLoad() {
      ShowCompanyInfoMap(this.companyid).then((res) => {
        // console.log(res);
        if (res.result === 1) {
          this.title = res.companyName;
          if (res.longitude != "" && res.latitude != "") {
            this.long = res.longitude;
            this.lat = res.latitude;
          }
          this.createMap(res.companyName, res.address);
        } else {
          Dialog.alert({
            message: res.msg,
          }).then(() => {
            this.$router.go(-1);
          });
        }
      });
    },
    createMap(companyname, address) {
      AMapLoader.load({
        key: "db7f2276c0d48e706a0ea229bf69ae2d", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.Geocoder"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then((AMap) => {
          let long = this.long;
          let lat = this.lat;
          if (long === 0 || lat === 0) {
            const Geocoder = new AMap.Geocoder({
              city: "嘉兴",
            });
            Geocoder.getLocation(address, (status, result) => {
              if (status === "complete" && result.info === "OK") {
                // result中对应详细地理坐标信息
                this.long = result.geocodes[0].location.lng;
                this.lat = result.geocodes[0].location.lat;
                // console.log(this.long, this.lat)

                this.map = new AMap.Map("map", {
                  zoom: 15,
                  center: [this.long, this.lat],
                });
                this.map.add(
                  new AMap.Marker({
                    position: new AMap.LngLat(this.long, this.lat),
                    title: companyname,
                  })
                );
              }
            });
          } else {
            this.map = new AMap.Map("map", {
              zoom: 15,
              center: [long, lat],
            });
            this.map.add(
              new AMap.Marker({
                position: new AMap.LngLat(long, lat),
                title: companyname,
              })
            );
          }

          // this.map.setStatus({
          //   dragEnable: true,
          //   keyboardEnable: true,
          //   doubleClickZoom: true,
          //   zoomEnable: true,
          //   rotateEnable: true,
          // });

          //构建自定义信息窗体
          // address = address.replace('嘉兴市', '')
          // var infoWindow = new AMap.InfoWindow({
          //     anchor: 'bottom-center',
          //     content: `<span style='font-size:12px;'>${address}</span>`,
          //     offset: new AMap.Pixel(0, -40)
          // });
          // infoWindow.open(this.map, [long, lat]);
        })
        .catch((e) => {
          console.log(e);
        });
    },
  },
};
</script>

<style scoped>
@import "./CompanyInfo.css";
</style>
